<script>
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
export default {
  name: "inputPopup",
  components: { uniPopup },
  props: {
    value: String,
    title: {
      type: String,
      default: "请输入",
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    inputType: {
      type: String,
      default: "text",
    },
    paddingBottom: {
      type: String,
      default: "50vh",
    },
    validateMethod: {
      type: Function,
      default: () => {
        return () => true
      },
    },
		// 是否在按了确定按钮后自动关闭弹窗
		autoClose: {
			type: Boolean,
			default: true,
		}
  },
  data() {
    return {
      localValue: "",
      focus: false,
    }
  },
  methods: {
    open() {
      this.localValue = this.value
      this.$refs.popup.open()
      this.$nextTick(() => {
        this.focus = true
      })
    },
    confirm() {
      if (!this.validateMethod(this.localValue)) return
      this.$emit("input", this.localValue)
      this.$emit("submit")
      this.autoClose && this.$refs.popup.close()
    },
		close() {
			this.$refs.popup.close()
		}
  },
  emits: ["submit", "cancel"],
}
</script>

<template>
  <uni-popup
    ref="popup"
    type="bottom"
    @change="
      (val) => {
        !val.show && (focus = false)
      }
    "
  >
    <view class="content" :style="{ 'padding-bottom': paddingBottom }">
      <view class="header">
        <view
          class="cancel-btn btn"
          @click="
            () => {
              $refs.popup.close()
              $emit('cancel')
            }
          "
          >取消</view
        >
        <view class="title">{{ title }}</view>
        <view class="confirm-btn btn" @click="confirm">确定</view>
      </view>
      <view class="input-container">
        <input v-model="localValue" :placeholder="placeholder" :focus="focus" :type="inputType" :adjust-position="false"/>
      </view>
			<slot></slot>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.content {
  background: white;
  padding: {
    top: 28rpx;
    left: 28rpx;
    right: 28rpx;
  }
  border-radius: 40rpx 40rpx 0rpx 0rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
    }

    .btn {
      width: 130rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .cancel-btn {
      background: #f5f5f5;
      color: #333333;
    }

    .confirm-btn {
      background: #ffd658;
      color: #333333;
    }
  }

  .input-container {
    margin: 50rpx 0;
    background: var(--gray-background-color);
    padding: 20rpx;
    border-radius: 8rpx;
  }
}
</style>
